<template>
  <div class="side-bar">
    <ul class="icon_lists">
      <li>
        <i class="iconfont icon-n"></i>
      </li>
      <li>
        <a href="javascript:;"><i class="iconfont icon-star"></i></a>
      </li>
      <li>
        <a href="javascript:;"><i class="iconfont icon-addzhuanhuan"></i></a>
      </li>
      <li>
        <a href="javascript:;"><i class="iconfont icon-error"></i></a>
      </li>
    </ul>
  </div>

</template>

<script type="text/ecmascript-6">
  export default {}
</script>
<style lang="scss" rel="stylesheet/scss">
  .side-bar {
    width: 75px;
    background: rgb(48, 65, 77);
    height: 100%;
    .icon_lists {
      padding: 50px 0 50px 0;
      margin: 0;
      li {
        list-style: none;
        margin: 30px 0;
        text-align: center;
        a {
          text-decoration: none;
          &:hover .iconfont {
            color: #97c94e;
          }
        }
        a.active{
          color: #97c94e;
        }
      }
    }
    .iconfont {
      font-size: 30px;
      color: rgb(102, 106, 109);
    }
    .icon-n {
      color: rgb(61, 160, 119);
    }
  }
</style>
